{#<!DOCTYPE html>#}
{#<html lang="zh-CN">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <meta name="viewport" content="width=device-width, initial-scale=1.0">#}
{#    <title>掌子面统计信息</title>#}
{#    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">#}
{#    <style>#}
{#        body {#}
{#            background-color: #f8f9fa;#}
{#        }#}
{#        .container {#}
{#            margin-top: 50px;#}
{#            padding-bottom: 30px;#}
{#        }#}
{#        .chart-container {#}
{#            text-align: center;#}
{#            margin-top: 40px;#}
{#            background: white;#}
{#            padding: 20px;#}
{#            border-radius: 10px;#}
{#            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);#}
{#        }#}
{#        .chart-title {#}
{#            font-weight: bold;#}
{#            margin-bottom: 15px;#}
{#            font-size: 1.2rem;#}
{#            color: #333;#}
{#        }#}
{#        .statistics-list {#}
{#            margin-top: 30px;#}
{#            padding: 20px;#}
{#            background: white;#}
{#            border-radius: 10px;#}
{#            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);#}
{#        }#}
{#        .statistics-list h4 {#}
{#            color: #007bff;#}
{#        }#}
{#        .statistics-list ul {#}
{#            list-style-type: none;#}
{#            padding-left: 0;#}
{#        }#}
{#        .statistics-list ul li {#}
{#            padding: 8px 0;#}
{#            border-bottom: 1px solid #eaeaea;#}
{#        }#}
{#        .statistics-list ul li:last-child {#}
{#            border-bottom: none;#}
{#        }#}
{#        .chart-container img {#}
{#            max-width: 100%;#}
{#            height: auto;#}
{#            border-radius: 8px;#}
{#            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);#}
{#        }#}
{#        footer {#}
{#            margin-top: 50px;#}
{#            padding: 10px 0;#}
{#            background: #007bff;#}
{#            color: white;#}
{#            text-align: center;#}
{#            border-top-left-radius: 10px;#}
{#            border-top-right-radius: 10px;#}
{#        }#}
{#    </style>#}
{#</head>#}
{#<body>#}
{##}
{#<nav class="navbar navbar-expand-lg navbar-light bg-light">#}
{#    <div class="container-fluid">#}
{#        <a class="navbar-brand" href="#">统计报表系统</a>#}
{#        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">#}
{#            <span class="navbar-toggler-icon"></span>#}
{#        </button>#}
{#        <div class="collapse navbar-collapse" id="navbarNav">#}
{#            <ul class="navbar-nav">#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="{% url 'geological_statistics' %}">掌子面统计</a>#}
{#                </li>#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="{% url 'excavation_statistics' %}">超欠挖计算统计</a>#}
{#                </li>#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="{% url 'diagnosis_statistics' %}">超欠挖诊断统计</a>#}
{#                </li>#}
{#                <li class="nav-item">#}
{#                    <a class="nav-link" href="{% url 'tunnel_statistics' %}">隧道轮廓统计</a>#}
{#                </li>#}
{#            </ul>#}
{#        </div>#}
{#    </div>#}
{#</nav>#}
{##}
{#<div class="container">#}
{#    <h2 class="text-center mb-4">#}
{#        {% if is_admin %}#}
{#            <span class="badge bg-primary">全局</span> 掌子面统计报表#}
{#        {% else %}#}
{#            <span class="badge bg-success">我的</span> 掌子面统计报表#}
{#        {% endif %}#}
{#    </h2>#}
{##}
{#    <!-- 统计指标 -->#}
{#    <div class="statistics-list">#}
{#        <h4>统计信息</h4>#}
{#        <ul class="list-group">#}
{#            <li class="list-group-item d-flex justify-content-between align-items-center">#}
{#                上传记录数#}
{#                <span class="badge bg-primary">{{ statistics.record_count }}</span>#}
{#            </li>#}
{#            <li class="list-group-item d-flex justify-content-between align-items-center">#}
{#                开挖宽度平均值#}
{#                <span class="badge bg-success">{{ statistics.excavation_width_avg|default:"暂无数据" }}</span>#}
{#            </li>#}
{#            <li class="list-group-item d-flex justify-content-between align-items-center">#}
{#                开挖高度平均值#}
{#                <span class="badge bg-success">{{ statistics.excavation_height_avg|default:"暂无数据" }}</span>#}
{#            </li>#}
{#            <li class="list-group-item d-flex justify-content-between align-items-center">#}
{#                开挖面积平均值#}
{#                <span class="badge bg-info">{{ statistics.excavation_area_avg|default:"暂无数据" }}</span>#}
{#            </li>#}
{#            <li class="list-group-item d-flex justify-content-between align-items-center">#}
{#                岩石强度平均值#}
{#                <span class="badge bg-warning text-dark">{{ statistics.rock_strength_avg|default:"暂无数据" }}</span>#}
{#            </li>#}
{#        </ul>#}
{#    </div>#}
{##}
{#    <!-- 图表部分 -->#}
{#    <div class="chart-container">#}
{#        <h4 class="chart-title">开挖宽度分布</h4>#}
{#        {% if charts.excavation_width_distribution %}#}
{#            <img src="data:images/png;base64,{{ charts.excavation_width_distribution }}" alt="开挖宽度分布">#}
{#        {% else %}#}
{#            <p class="text-muted">暂无数据</p>#}
{#        {% endif %}#}
{#    </div>#}
{##}
{#    <div class="chart-container">#}
{#        <h4 class="chart-title">开挖高度 vs 开挖面积</h4>#}
{#        {% if charts.excavation_height_vs_area %}#}
{#            <img src="data:images/png;base64,{{ charts.excavation_height_vs_area }}" alt="开挖高度 vs 开挖面积">#}
{#        {% else %}#}
{#            <p class="text-muted">暂无数据</p>#}
{#        {% endif %}#}
{#    </div>#}
{##}
{#    <div class="chart-container">#}
{#        <h4 class="chart-title">设计断面随时间变化趋势</h4>#}
{#        {% if charts.design_section_trend %}#}
{#            <img src="data:images/png;base64,{{ charts.design_section_trend }}" alt="设计断面趋势">#}
{#        {% else %}#}
{#            <p class="text-muted">暂无数据</p>#}
{#        {% endif %}#}
{#    </div>#}
{#</div>#}
{##}
{#<footer>#}
{#    © 2025 掌子面统计系统 - 全部数据实时统计#}
{#</footer>#}
{##}
{#<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>#}
{#</body>#}
{#</html>#}



<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>掌子面统计信息</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }

        .left-sidebar {
            width: 200px;
            background: #343a40;
            color: white;
            height: 100vh;
            padding-top: 20px;
            position: fixed;
            top: 0;
            left: 0;
        }

        .left-sidebar .nav-link {
            color: white;
            margin: 10px 0;
            transition: color 0.3s ease;
        }

        .left-sidebar .nav-link:hover {
            color: #007bff;
        }

        .right-content {
            margin-left: 200px;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            grid-template-rows: auto auto;
            padding-bottom: 60px;
        }

        .chart-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            height: 100%;
            transition: transform 0.3s ease;
        }

        .chart-container:hover {
            transform: translateY(-5px);
        }

        .chart-title {
            font-weight: bold;
            margin-bottom: 15px;
            font-size: 1.2rem;
            color: #333;
            text-align: center;
        }

        footer {
            margin-left: 200px;
            padding: 10px 0;
            background: #007bff;
            color: white;
            text-align: center;
            position: fixed;
            bottom: 0;
            width: calc(100% - 200px);
        }

        @media (max-width: 768px) {
            .right-content {
                grid-template-columns: 1fr;
                margin-left: 0;
            }

            .left-sidebar {
                width: 100%;
                position: relative;
                height: auto;
            }

            footer {
                margin-left: 0;
                width: 100%;
            }
        }

        canvas {
            width: 100% !important;
            height: auto !important;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="left-sidebar">
        <h3 class="text-center text-white mb-4">统计报表系统</h3>
        <nav>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'geological_statistics' %}">掌子面统计</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'excavation_statistics' %}">超欠挖计算统计</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'diagnosis_statistics' %}">超欠挖诊断统计</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'tunnel_statistics' %}">隧道轮廓统计</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'index' %}">返回</a>
                </li>
            </ul>
        </nav>
    </div>

    <div class="right-content">
        <div class="chart-container">
            <h4 class="chart-title">开挖参数分布</h4>
            <canvas id="timeSeriesChart"></canvas>
        </div>
        <div class="chart-container">
            <h4 class="chart-title">参数对比分析</h4>
            <canvas id="distributionChart"></canvas>
        </div>
        <div class="chart-container">
            <h4 class="chart-title">参数占比分析</h4>
            <canvas id="strengthChart"></canvas>
        </div>
        <div class="chart-container">
            <h4 class="chart-title">综合数据分析</h4>
            <canvas id="parametersChart"></canvas>
        </div>
    </div>
</div>

<footer>
    © 2025 掌子面统计系统 - 全部数据实时统计
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 时间趋势折线图
    var ctx1 = document.getElementById('timeSeriesChart').getContext('2d');
    var timeSeriesChart = new Chart(ctx1, {
        type: 'line',
        data: {
            labels: ['开挖宽度', '开挖高度', '开挖面积', '岩石强度'],
            datasets: [{
                label: '统计数据',
                data: [
                    {{ statistics.excavation_width_avg|default:0 }},
                    {{ statistics.excavation_height_avg|default:0 }},
                    {{ statistics.excavation_area_avg|default:0 }},
                    {{ statistics.rock_strength_avg|default:0 }}
                ],
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderWidth: 2,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                title: {
                    display: true,
                    text: '开挖参数分布',
                    font: { size: 16 }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '数值'
                    }
                }
            }
        }
    });

    // 宽高分布柱状图
    var ctx2 = document.getElementById('distributionChart').getContext('2d');
    var distributionChart = new Chart(ctx2, {
        type: 'bar',
        data: {
            labels: ['开挖宽度', '开挖高度', '开挖面积', '岩石强度'],
            datasets: [{
                label: '统计数据',
                data: [
                    {{ statistics.excavation_width_avg|default:0 }},
                    {{ statistics.excavation_height_avg|default:0 }},
                    {{ statistics.excavation_area_avg|default:0 }},
                    {{ statistics.rock_strength_avg|default:0 }}
                ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.6)',
                    'rgba(54, 162, 235, 0.6)',
                    'rgba(255, 206, 86, 0.6)',
                    'rgba(75, 192, 192, 0.6)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                title: {
                    display: true,
                    text: '参数对比分析',
                    font: { size: 16 }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '数值'
                    }
                }
            }
        }
    });

    // 参数分布饼图
    var ctx3 = document.getElementById('strengthChart').getContext('2d');
    var strengthChart = new Chart(ctx3, {
        type: 'pie',
        data: {
            labels: ['开挖宽度', '开挖高度', '开挖面积', '岩石强度'],
            datasets: [{
                data: [
                    {{ statistics.excavation_width_avg|default:0 }},
                    {{ statistics.excavation_height_avg|default:0 }},
                    {{ statistics.excavation_area_avg|default:0 }},
                    {{ statistics.rock_strength_avg|default:0 }}
                ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(75, 192, 192, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                title: {
                    display: true,
                    text: '参数占比分析',
                    font: { size: 16 }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.label || '';
                            let value = context.raw || 0;
                            return `${label}: ${value.toFixed(2)}`;
                        }
                    }
                }
            }
        }
    });

    // 综合分析环形图
    var ctx4 = document.getElementById('parametersChart').getContext('2d');
    var parametersChart = new Chart(ctx4, {
        type: 'doughnut',
        data: {
            labels: ['开挖宽度', '开挖高度', '开挖面积', '岩石强度'],
            datasets: [{
                data: [
                    {{ statistics.excavation_width_avg|default:0 }},
                    {{ statistics.excavation_height_avg|default:0 }},
                    {{ statistics.excavation_area_avg|default:0 }},
                    {{ statistics.rock_strength_avg|default:0 }}
                ],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)',
                    'rgba(54, 162, 235, 0.8)',
                    'rgba(255, 206, 86, 0.8)',
                    'rgba(75, 192, 192, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                title: {
                    display: true,
                    text: '综合数据分析',
                    font: { size: 16 }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            let label = context.label || '';
                            let value = context.raw || 0;
                            return `${label}: ${value.toFixed(2)}`;
                        }
                    }
                }
            },
            cutout: '60%'
        }
    });
</script>

</body>
</html>
